<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cachedViews">
      <component :is="Component" :key="$route.fullPath" />
    </keep-alive>
  </router-view>
</template>

<script setup lang="ts">
import { ref, watch,onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const cachedViews = ref<string[]>(["Home", "About"]);

watch(
  route,
  (to) => {
    if (to.meta.keepAlive && to.name && typeof to.name === "string") {
      // 避免重复添加
      if (!cachedViews.value.includes(to.name)) {
        cachedViews.value = [...cachedViews.value, to.name];
      }
    }
  },
  { immediate: true }
);

onMounted(() => {

});
</script>
<style scoped></style>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
